<%@ page import="java.util.List" %>
<%@ page import="com.onlinevideo.entity.Role" %>
<%@ page import="com.onlinevideo.entity.Authority" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/bootstrap-theme.min.css" rel="stylesheet">
    <script src="../static/js/jquery-1.11.3.min.js" type="text/jscript"></script>
    <script src="../static/js/bootstrap.min.js" type="text/jscript"></script>
    <script src="../static/js/sweetalert.min-2.1.2.js" type="text/javascript"></script>
    <style type="text/css">
        th {
            text-align: center;
        }

        td {
            text-align: center;
        }
    </style>
    <script type="text/javascript">

        $(function () {
            $(".update").click(function () {
                var object = $(this).parents("tr");
                $("#editRoleName").val(object.children("th:eq(2)").text().trim());
                $("#editRoleDescription").val(object.children("th:eq(3)").text().trim());
                var roleStatus =  ((object.children("th:eq(4)").text().trim()) == "启用")?"1":"0";
                $("#editRoleStatus").val(roleStatus);
                $("#edit").attr("data-id",$(this).attr("data-id"));
            });
            $("#addRole").click(function (){
                var roleName = $("#addRoleName").val().trim();
                var roleDescription = $("#addRoleDescription").val().trim();
                var roleStatus = $("#addRoleStatus").val().trim();
                $.ajax({
                    url: "../role.do",
                    type:"post",
                    dataType:"text",
                    data:{
                        "roleName":roleName,
                        "roleDescription":roleDescription,
                        "roleStatus":roleStatus,
                        "action":"insert"
                    },
                    success:function (data) {
                        var result = JSON.parse(data);
                        if(result.code == "1"){
                            swal("提示", result.message, "success").then(function (isOk) {});
                        }else {
                            swal("提示", result.message, "error").then(function (isOk) {});
                        }
                    }
                });
            });
            $(".delete").click(function (){
                var $this = $(this);
                var roleId = $(this).attr("data-id");
                $.ajax({
                    url: "../role.do",
                    type:"post",
                    dataType:"text",
                    data:{
                        "id":roleId,
                        "action":"delete"
                    },
                    success:function (data) {
                        var result = JSON.parse(data);
                        if(result.code == "1"){
                            swal("提示", result.message, "success").then(function (isOk) {
                                $this.parents("tr").remove();
                            });
                        }else {
                            swal("提示", result.message, "error").then(function (isOk) {});
                        }
                    }
                });
            });
            $("#edit").click(function (){
                var $this = $(this);
                var roleId = $(this).attr("data-id");
                var roleName = $("#editRoleName").val().trim();
                var roleDescription =  $("#editRoleDescription").val().trim();
                var roleStatus =  $("#editRoleStatus").val().trim();
                $.ajax({
                    url: "../role.do",
                    type:"post",
                    dataType:"text",
                    data:{
                        "id":roleId,
                        "roleName":roleName,
                        "roleDescription":roleDescription,
                        "roleStatus":roleStatus,
                        "action":"update"
                    },
                    success:function (data) {
                        var result = JSON.parse(data);
                        if(result.code == "1"){
                            swal("提示", result.message, "success").then(function (isOk) {

                            });
                        }else {
                            swal("提示", result.message, "error").then(function (isOk) {});
                        }
                    }
                });
            });
            $("body").on("click",".deleteRoleAuthority",function (){
                var $deleteRoleAuthority = $(this);
                var roleAuthorityId = $deleteRoleAuthority.attr("data-id");
                $.ajax({
                    url: "../roleAuthority.do",
                    type:"post",
                    dataType:"text",
                    data:{
                        "id":roleAuthorityId,
                        "action":"delete"
                    },
                    success:function (data) {
                        var result = JSON.parse(data);
                        if(result.code == "1"){
                            swal("提示", result.message, "success").then(function (isOk) {});
                        }else {
                            swal("提示", result.message, "error").then(function (isOk) {});
                        }
                        $deleteRoleAuthority.parents("tr").remove();
                    }
                });

            });
            $("#addAuthority").click(function (){
                var roleId = $("input[type='radio']:checked").attr("data-id");
                var authorityId = $("#addAuthorityInfo").val().trim();
                $.ajax({
                    url: "../roleAuthority.do",
                    type:"post",
                    dataType:"text",
                    data:{
                        "roleId":roleId,
                        "authorityId":authorityId,
                        "action":"insert"
                    },
                    success:function (data) {
                        var result = JSON.parse(data);
                        if(result.code == "1"){
                            swal("提示", result.message, "success").then(function (isOk) {
                            });
                        }else {
                            swal("提示", result.message, "error").then(function (isOk) {});
                        }
                    }
                });

            });
            $(".roleSelectRadio").click(function (){
                $("#authorityInfo").find("tr").remove();
                var roleId = $(this).attr("data-id");
                $.ajax({
                    url: "../roleAuthority.do",
                    type:"get",
                    dataType:"text",
                    data:{
                        "roleId":roleId,
                        "action":"queryByRoleId"
                    },
                    success:function (data) {
                        var result = JSON.parse(data);
                        console.log(result)
                        if(result.code == "1"){
                           for(var i = 0 ; i< result.data.length ; i++ ){
                               let roleAuthority = result.data[i];
                               let tr = "<tr style='vertical-align:middle;text-align: center'> <th scope='row'>"+roleAuthority.id+" </th><th>"+roleAuthority['authority'].url+"</th><th>"+roleAuthority['authority']['authorityDescription']+" </th><th><button type='button' class='btn btn-danger  btn-sm deleteRoleAuthority' data-id='"+roleAuthority.id+"'>删除</button></th></tr>"
                               $("#authorityInfo").append(tr);
                           }
                        }else {
                            swal("提示", result.message, "error").then(function (isOk) {});
                        }
                    }
                });
            })
        });
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-7">
            <div class="bs-example" data-example-id="btn-variants">
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addRoleBtn">新增</button>
                <!--新增角色信息模态框-->
                <div class="add">
                    <div class="modal fade" id="addRoleBtn" tabindex="-1" role="dialog" aria-labelledby="addRoleLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="addRoleLabel">新增角色信息</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-md-2"></div>
                                        <div class="col-md-8">
                                            <form class="form-horizontal" action="../role.do?action=insert">
                                                <div class="form-group">
                                                    <label for="addRoleName" class="col-sm-3 control-label">角色名称:</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control" id="addRoleName"
                                                               placeholder="请输入角色名">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="addRoleDescription"
                                                           class="col-sm-3 control-label">角色简介:</label>
                                                    <div class="col-sm-9">
                                                    <textarea class="form-control" id="addRoleDescription"
                                                              style="resize: none;" placeholder="请输入角色简介"></textarea>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="addRoleStatus" class="col-sm-3 control-label">角色类型:</label>
                                                    <div class="col-sm-9">
                                                        <select class="form-control" id="addRoleStatus">
                                                            <option value="1" selected>非管理员</option>
                                                            <option value="0" >管理员</option>

                                                        </select>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="row">
                                        <div class="col-md-2"></div>
                                        <div class="col-md-8">
                                            <div class="col-md-4">
                                                <button type="button" class="btn btn-primary opera" id="addRole">添加</button>
                                            </div>
                                            <div class="col-md-4">
                                                <button type="reset" class="btn btn-default">重置</button>
                                            </div>
                                            <div class="col-md-4">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--编辑角色信息模态框-->
                <div class="edit">
                    <div class="modal fade" id="editRoleBtn" tabindex="-1" role="dialog" aria-labelledby="editRoleLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="editRoleLabel">修改角色信息</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-md-2"></div>
                                        <div class="col-md-8">
                                            <form class="form-horizontal" action="../role.do?action=update">
                                                <div class="form-group">
                                                    <label for="editRoleName" class="col-sm-3 control-label">角色名称:</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control" id="editRoleName"
                                                               placeholder="请输入角色名">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="editRoleDescription"
                                                           class="col-sm-3 control-label">角色简介:</label>
                                                    <div class="col-sm-9">
                                                    <textarea class="form-control" id="editRoleDescription"
                                                              style="resize: none;" placeholder="请输入角色简介"></textarea>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="editRoleStatus" class="col-sm-3 control-label">角色状态:</label>
                                                    <div class="col-sm-9">
                                                        <select class="form-control" id="editRoleStatus">
                                                            <option value="1" selected>非管理员</option>
                                                            <option value="0">管理员</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="row">
                                        <div class="col-md-2"></div>
                                        <div class="col-md-8">
                                            <div class="col-md-4">
                                                <button type="button" class="btn btn-primary opera" id="edit" data-id="-1">修改</button>
                                            </div>
                                            <div class="col-md-4">
                                                <button type="reset" class="btn btn-default">重置</button>
                                            </div>
                                            <div class="col-md-4">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <div class="bs-example" data-example-id="btn-variants">
                <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#addAuthorityBtn">新增</button>
                <!--新增权限信息模态框-->
                <div class="add">
                    <div class="modal fade" id="addAuthorityBtn" tabindex="-1" role="dialog" aria-labelledby="addAuthorityLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="addAuthorityLabel">新增权限信息</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="row">
                                        <div class="col-md-2"></div>
                                        <div class="col-md-8">
                                            <form class="form-horizontal" action="../role.do?action=insert">
                                                <div class="form-group">
                                                    <label for="addAuthority" class="col-sm-3 control-label">权限URL:</label>
                                                    <div class="col-sm-9">
                                                        <select  class="form-control" id="addAuthorityInfo" >
                                                            <%
                                                                List<Authority> authorities = (List<Authority>)request.getAttribute("authorities");
                                                                for (Authority authority : authorities) {
                                                            %>
                                                                <option value="<%= authority.getId()%>"><%= authority.getUrl()%></option>
                                                            <%
                                                                }
                                                            %>
                                                        </select>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <div class="row">
                                        <div class="col-md-2"></div>
                                        <div class="col-md-8">
                                            <div class="col-md-4">
                                                <button type="button" class="btn btn-primary opera" id="addAuthority">添加</button>
                                            </div>
                                            <div class="col-md-4">
                                                <button type="reset" class="btn btn-default">重置</button>
                                            </div>
                                            <div class="col-md-4">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-7">
                <table class="table table-striped" style="margin-bottom: 0;">
                    <thead>
                        <tr >
                            <th colspan="6" scope="row">角色信息表</th>
                        </tr>
                        <tr style="text-align: center ; vertical-align:center;">
                            <th style="width: 70px">选择</th>
                            <th style="width: 70px">编号</th>
                            <th style="width: 100px">角色名称</th>
                            <th style="width: 200px">角色说明</th>
                            <th style="width: 100px">角色状态</th>
                            <th style="width: 200px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    <%
                        List<Role> roleList = (List<Role>)request.getAttribute("roles");
                        for (int i = 0; i < roleList.size(); i++) {
                            Role role = roleList.get(i);
                    %>
                    <tr style="vertical-align:middle;text-align: center">
                        <th style="width: 70px;">
                            <input type="radio" name="roleRadio" class = "roleSelectRadio" data-id="<%=role.getId()%>"  <%= i==0 ? "checked" :""%>  >
                        </th>
                        <th  style="width: 70px;" scope="row">
                            <%= role.getId() %>
                        </th>
                        <th  style="width: 100px;">
                            <%= role.getRoleName()%>
                        </th>
                        <th  style="width: 200px;">
                            <%= role.getRoleDescription()%>
                        </th>

                        <th  style="width: 100px;">
                            <%=  role.getRoleStatus() == 0 ? "管理员" : "非管理员" %>
                        </th>
                        <th  style="width: 200px;">
                            <button type="button" class="update btn btn-primary btn-sm" data-id="<%= role.getId() %>" data-toggle="modal" data-target="#editRoleBtn">修改</button>
                            <button type="button" class="delete btn btn-danger  btn-sm" data-id="<%= role.getId() %>">删除</button>
                        </th>
                    </tr>
                    <%
                        }
                    %>
                    </tbody>
                </table>
            </div>
            <div class="col-md-5">
                <table class="table table-striped" style="margin-bottom: 0;">
                    <thead>
                        <tr>
                            <th colspan="4" scope="row">权限信息表</th>
                        </tr>
                        <tr style="text-align: center ; vertical-align:center;">
                            <th>编号</th>
                            <th>可访问地址</th>
                            <th>权限说明</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="authorityInfo" ></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
</html>
